<template>
    <div class="body">
        <div v-if="currentPath == '/home/homepage'" class="homenav">
            <div class="nav-logo">
                <img src="../../assets/images/denglu_logo.png">
                <p>能力开放平台</p>
            </div>
            <router-link to="/home/homepage" active-class="active" >首页</router-link>
            <router-link to="/home/capability" active-class="active" >能力目录</router-link>
            <router-link to="/home/resource" active-class="active" >开发资源</router-link>
            <!-- <router-link to="/home/casecenter" active-class="active">案例中心</router-link> -->
            <router-link to="/home/about" active-class="active" >关于我们</router-link>

            <div class="nav-button">
                <button class="nav-login" @click="gologin">登录</button>
                <button class="nav-register" @click="gore">注册</button>
            </div>
        </div>
        <div v-else class="nav">
            <div class="nav-logo">
                <img src="../../assets/images/logo38.png">
                <p>能力开放平台</p>
            </div>
            <router-link to="/home/homepage" active-class="active" >首页</router-link>
            <router-link to="/home/capability" active-class="active">能力目录</router-link>
            <router-link to="/home/resource" active-class="active" >开发资源</router-link>
            <!-- <router-link to="/home/casecenter" active-class="active">案例中心</router-link> -->
            <router-link to="/home/about" active-class="active">关于我们</router-link>

            <div class="nav-button">
                <button class="nav-login" @click="gologin">登录</button>
                <button class="nav-register" @click="gore">注册</button>
            </div>
        </div>

        <div class="nav" :class="navfixed ? 'topnav' : 'nonav'">
            <div class="nav-logo">
                <img src="../../assets/images/logo38.png">
                <p>能力开放平台</p>
            </div>
            <router-link to="/home/homepage" active-class="active">首页</router-link>
            <router-link to="/home/capability" active-class="active">能力目录</router-link>
            <router-link to="/home/resource" active-class="active">开发资源</router-link>
            <!-- <router-link to="/home/casecenter" active-class="active">案例中心</router-link> -->
            <router-link to="/home/about" active-class="active">关于我们</router-link>

            <div class="nav-button">
                <button class="nav-login" @click="gologin">登录</button>
                <button class="nav-register" @click="gore">注册</button>
            </div>
        </div>
        <router-view></router-view>
        <div class="footer">
            <img src="../../assets/images/foot_bj2.png">
            <div class="foot">
                <div>
                    <router-link to="">
                        <h3>快速入口</h3>
                    </router-link>
                    <router-link to="">
                        <p>新手专区</p>
                    </router-link>
                    <router-link to="">
                        <p>了解系统</p>
                    </router-link>
                    <router-link to="">
                        <p>使用指引</p>
                    </router-link>
                    <router-link to="">
                        <p>能力目录</p>
                    </router-link>
                    <router-link to="">
                        <p>开发资源</p>
                    </router-link>
                    <router-link to="">
                        <p>在线测试</p>
                    </router-link>
                </div>
                <div>
                    <router-link to="">
                        <h3>友情链接</h3>
                    </router-link>
                    <router-link to="">
                        <p>江西教育网</p>
                    </router-link>
                    <router-link to="">
                        <p>扶贫系统</p>
                    </router-link>
                    <router-link to="">
                        <p>终身学习帐号平台</p>
                    </router-link>
                    <router-link to="">
                        <p>厅管理门户</p>
                    </router-link>
                    <router-link to="">
                        <p>夸校选课平台</p>
                    </router-link>
                    <router-link to="">
                        <p>综合素质评价平台</p>
                    </router-link>
                </div>
                <div>
                    <router-link to="">
                        <h3>关于我们</h3>
                    </router-link>
                    <router-link to="">
                        <p>关注微信公众号</p>
                    </router-link>
                    <router-link to="">
                        <p>QQ号</p>
                    </router-link>
                    <router-link to="">
                        <p>联系方式</p>
                    </router-link>
                    <router-link to="">
                        <p>地址</p>
                    </router-link>
                    <router-link to="">
                        <p>邮箱</p>
                    </router-link>
                </div>
                <div>
                    <router-link to="">
                        <h3>客户服务</h3>
                    </router-link>
                    <router-link to="">
                        <p>咨询与投诉</p>
                    </router-link>
                </div>
            </div>
        </div>
    </div>


</template>
<script>
export default {
    name: 'home',
    data() {
        return {
            navfixed: false,
            currentPath: null,
            navclass: 'homenav'
        }
    },
    methods: {
        gologin() {
            this.$router.push("/login")
        },
        gore() {
            this.$router.push("/register")
        },
        changeclass(em) {
            this.navclass = em


        }
    },

    mounted() {
        window.addEventListener('scroll', () => {
            const n = document.documentElement.scrollTop
            if (n > 100) {
                this.navfixed = true
            } else {
                this.navfixed = false
            }
        })



    }, 
     watch: {
    // 监视路由对象中的"fullPath"属性，它在路由切换时会被触发
    '$route.fullPath': function (newPath, oldPath) {
      // 在这里编写你的逻辑
      console.log('路由已改变', newPath, oldPath);
      this.currentPath = newPath;
    }
  },
    created() {
        this.currentPath = this.$route.path;
    }

}

</script>

<style scoped lang="scss">
* {
    margin: 0 auto;
    padding: 0;
}

.body {
    width: 100%;
    margin: 0 auto;
    position: relative;
    min-width: 1500px;

}

.nonav {
    position: absolute;
    top: -140px;
    opacity: 0;
    background: white;
    transition: 0.8s;

}

.topnav {
    position: sticky;
    top: 0px;
    background: white;
    z-index: 999;
    transition: 0.8s;
    opacity: 1;


}

.homenav {
    width: 100%;
    padding: 0 5% 0 5%;
    box-shadow: 3px 0 5px gray;
    display: flex;
    max-height: 10%;
    transition: 0.8s;
    position: absolute;
    background: rgba(255, 255, 255, 0.5);
    z-index: 999;

    .nav-logo {
        display: flex;
        // max-width: 60%;
        margin-left: 0;

        img {
            margin-top: 10px;
            height: 45px;
            width: 45px;
            margin-right: 10px;
        }

        p {
            min-width: 260px;
            font-size: 21px;

            height: 65px;
            line-height: 65px;
            color: rgb(255, 255, 255);
            font-family: "Yapi SC";
        }
    }

    a {
        height: 65px;
        line-height: 65px;
        margin-left: 20px;
        margin-right: 20px;
        font-size: 22px;
        max-width: 9%;
        min-width: 80px;
        font-family: "微软雅黑";
        font-weight: 500;
        text-align: end;
        min-width: 110px;
    }

    .active {
        color: rgb(255, 255, 255);
        font-weight: 600;
    }

    .nav-button {
        display: flex;
        margin-left: 23%;
        margin-right: 0;


        .nav-login {
            width: 80px;
            height: 45px;
            margin-top: 10px;
            border: none;
            background: rgba(255, 255, 255, 0);
            font-size: 16px;
            font-weight: 600;
            color: rgb(7, 41, 92);
        }

        .nav-register {
            width: 80px;
            height: 45px;
            margin-top: 10px;
            border: none;
            font-size: 16px;
            font-weight: 500;
            background-color: rgb(7, 153, 254);
            color: white;

        }
    }


}

.nav {
    width: 100%;
    padding: 0 5% 0 5%;
    box-shadow: 3px 0 5px gray;
    display: flex;
    max-height: 10%;
    transition: 0.8s;

    .nav-logo {
        display: flex;
        // max-width: 60%;
        margin-left: 0;

        img {
            margin-top: 10px;
            height: 45px;
            width: 45px;
            margin-right: 10px;
        }

        p {
            min-width: 260px;
            font-size: 21px;

            height: 65px;
            line-height: 65px;
            color: rgb(92, 92, 92);
            font-family: "Yapi SC";
        }
    }

    a {
        height: 65px;
        line-height: 65px;
        margin-left: 20px;
        margin-right: 20px;
        font-size: 22px;
        max-width: 9%;
        min-width: 80px;
        font-family: "微软雅黑";
        font-weight: 500;
        text-align: end;
        min-width: 110px;
    }

    .active {
        color: rgb(7, 153, 254);
        font-weight: 600;
    }

    .nav-button {
        display: flex;
        margin-left: 23%;
        margin-right: 0;

        .nav-login {
            width: 80px;
            height: 45px;
            margin-top: 10px;
            border: none;
            background-color: white;
            font-size: 16px;
            font-weight: 600;
            color: rgb(18, 63, 131);
        }

        .nav-register {
            width: 80px;
            height: 45px;
            margin-top: 10px;
            border: none;
            font-size: 16px;
            font-weight: 500;
            background-color: rgb(7, 153, 254);
            color: white;

        }
    }



}

.footer {
    margin-top: 50px;
    width: 100%;
    background-color: rgb(239, 249, 250);
    height: 350px;

    img {
        width: 100%;
        height: 20px;

    }

    .foot {
        display: flex;
        justify-self: center;
        width: 100%;

        div {
            width: 25%;
            text-align: center;
            // padding-left: 270px;
            box-sizing: border-box;

            h3 {
                margin-top: 10px;
                font-weight: 600;
            }

            p {

                width: 170px;
                font-size: 15px;
                margin-top: 15px;
                &:hover {
                color: rgb(7, 153, 254);
            }
            }

         
        }


    }

}
</style>